<template>
    <div class="ma-content-block p-4" style="position: relative;">

        <div class="flex" style="margin-bottom:12px">
            <a-tooltip content="请选择客户名称">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;" v-model="form.dept_id"
                    :filter-option="filterOption" :options="dept_list" :field-names="{ value: 'id', label: 'name' }"
                    allow-clear allow-search placeholder="请选择客户名称" />
            </a-tooltip>
            <a-tooltip content="请输入车号">
                <a-input v-model="form.car_no" placeholder="请输入车号" allow-clear
                    style="width:calc((100% - 64px) / 5);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请输入运单号">
                <a-input v-model="form.yundanhao" placeholder="请输入运单号" allow-clear
                    style="width:calc((100% - 64px) / 5);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请选择品名">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;" v-model="form.goods_id"
                    :filter-option="filterOption" :options="goods_list" :field-names="{ value: 'id', label: 'name' }"
                    allow-clear allow-search placeholder="请选择品名" />
            </a-tooltip>


            <a-tooltip content="请选择运输方式">
                <a-select style="width:calc((100% - 64px) / 5);" v-model="form.transport_type" :options="yunshuList"
                    :field-names="{ value: 'key', label: 'title' }" allow-clear allow-search placeholder="请选择运输方式" />
            </a-tooltip>
        </div>
        <div class="flex" style="margin-bottom:12px">
            <a-tooltip content="请输入原票号">
                <a-input v-model="form.ticket_number" placeholder="请输入原票号" allow-clear
                    style="width:calc((100% - 64px) / 5);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请输入集装箱号">
                <a-input v-model="form.box" placeholder="请输入集装箱号" allow-clear
                    style="width:calc((100% - 64px) / 5);margin-right:16px;" />
            </a-tooltip>
            <!-- <a-tooltip content="请选择办理时间">
                <a-range-picker style="width:calc((100% - 64px) / 5);margin-right:16px;" show-time
                    :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" v-model="form.process_time"
                    format="YYYY-MM-DD HH:mm" />
            </a-tooltip> -->
            <a-tooltip content="请选择到达时间">
                <a-range-picker style="width:calc((100% - 64px) / 5);margin-right:16px;" show-time
                    :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" v-model="form.come_time"
                    format="YYYY-MM-DD HH:mm" />
            </a-tooltip>
            <div class="flex " style="width:calc((((100% - 64px) / 5)) );">
                <a-button type="primary" style="margin-right:16px;" @click="handleDataTable">搜索</a-button>
                <a-button @click="handleChongZhi">重置</a-button>
            </div>
        </div>
        <div class="flex">
            <div class="" style="width:calc((100% - 16px) / 2)">
                <!-- <div style="height:32px;margin-bottom:1.5%"></div> -->
                <a-table :columns="columns" :data="dataTable" :loading="showSpin" :scroll="{ x: 800 }"
                    :virtual-list-props="{ height: 620 }" :scrollbar="scrollbar" column-resizable :pagination="false"
                    row-key='id' @row-click="rowClick"
                    :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: false, }"
                    v-model:selectedKeys="keys" @selection-change="setSelectedKeys">
                    <template #transport_type="{ record }">
                        <a-tooltip :content="handletransportName(record.transport_type)">
                            <div class="ellipsis">{{ handletransportName(record.transport_type) }}</div>
                        </a-tooltip>
                    </template>
                    <template #dept_id="{ record }">
                        <a-tooltip :content="handledeptName(record.dept_id)">
                            <div class="ellipsis">{{ handledeptName(record.dept_id) }}</div>
                        </a-tooltip>
                    </template>
                    <template #goods_id="{ record }">
                        <a-tooltip :content="handlegoodsName(record.goods_id)">
                            <div class="ellipsis">{{ handlegoodsName(record.goods_id) }}</div>
                        </a-tooltip>
                    </template>
                    <template #pay_price="{ record }">
                        <a-tooltip :content="record.pay_price">
                            <div class="ellipsis">{{ record.pay_price }}</div>
                        </a-tooltip>
                    </template>
                </a-table>
            </div>
            <div class="flex_1" style="margin-left:16px">
                <billAdd ref="billAddRef" :id="keys" :dept_id="form.dept_id" @shuaxin="shuaxin" @price="handlePrice">
                </billAdd>
            </div>
        </div>

        <div class="flex justify_end" style="margin-top:12px">
            <a-button @click="handleQuxiao" style="margin-right:16px;">取消</a-button>
            <a-popconfirm @ok="handleZhifu" content="是否确认选中的账单收费?确认后将生成一笔待支付账单">
                <a-button type="primary">确定</a-button>
            </a-popconfirm>
        </div>

        <!-- <a-modal v-model:visible="quedingShow" @cancel="quedingShow = false" title="新增账单" :width="1600" :footer="false" :mask-closable="false">
      <billAdd v-if="quedingShow" :id="keys" :dept_id="form.dept_id" @shuaxin = "shuaxin"></billAdd>
    </a-modal> -->
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, defineEmits } from 'vue'
import financialPayOrderRecord from '@/api/financial/financialPayOrderRecord'
import predictionManage from "@/api/prediction/predictionManage";
import billAdd from "./billadd.vue"
import commonApi from "@/api/common";
import { Message } from '@arco-design/web-vue'
import { pinyin } from "pinyin-pro"
import { request } from "@/utils/request.js";
import tool from '@/utils/tool'
import * as common from '@/utils/common'
const filterOption = (v, option) => {
    return option.keywords.some(keywords => keywords.includes(v))
}
const emits = defineEmits(['cell'])
const billAddRef = ref(null)
const dept_list = ref([])
const goods_list = ref([])
const yunshuList = ref([])
const dataTable = ref([])
const keys = ref([])
const showSpin = ref(false)
const scrollbar = ref(false)
const quedingShow = ref(false)
const handleQueding = () => {
    if (keys.value.length == 0) {
        Message.error('请选择要新增账单的预报单')
        return
    }
    quedingShow.value = true
}
const form = ref({
    dept_id: '',
    car_no: '',
    yundanhao: '',
    goods_id: '',
    transport_type: '',
    ticket_number: '',
    box: '',
    process_time: '',
    come_time: '',
    is_compled: 1
})
const setSelectedKeys = (val) => {
    console.log(val)
    keys.value = val
}
const handleQuxiao = () => {
    emits('cell', false)
}
const shuaxin = () => {
    keys.value = []
    dataTable.value = []
    handleDataTable()
    emits('cell', false)
}
const handlePrice = (val) => {
    dataTable.value.map((v, i) => {
        keys.value.map((v1, i1) => {
            if (v.id == v1) {
                v.pay_price = val
            }
        })
    })
}
const handleZhifu = () => {
    if (keys.value.length == 0) {
        Message.error('请选择要生成账单的预报单')
        return
    }
    billAddRef.value.handleZhifu()
}
const handleChongZhi = () => {

    form.value = {
        dept_id: '',
        car_no: '',
        yundanhao: '',
        goods_id: '',
        transport_type: '',
        ticket_number: '',
        box: '',
        process_time: '',
        come_time: '',
        is_compled: 1
    }
    keys.value = []
    handleDataTable()
}
const handleDeptList = () => {
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
            openPage: false,
            remoteOption: {
                filter: {
                    type: ['=', 2],
                    status: ['=', 1]
                },
                select: ["id", "name"],
                sort: { id: "desc" }
            }
        }
    }).then(res => {
        res.data.map((v, i) => {
            v.keywords = [
                v.name,
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join(''),
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join('').toUpperCase()
            ]
        })
        dept_list.value = res.data
    })
}
const hadnleChangeContract = (e) => {
    request({
        url: 'goods/manage/index',
        method: 'get',
        params: {
            pageSize: 4000,
        }
    }).then(res => {
        let _data = res.data.items
        _data.map((v, i) => {
            v.goods_id = v.id
            // v.name = v.type.name + '-' + v.name
        })
        _data.map((v, i) => {
            v.keywords = [
                v.name,
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join(''),
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join('').toUpperCase()
            ]
        })
        // list = _data
        goods_list.value = _data
    })

}
const handleDataTable = () => {
    showSpin.value = true
    keys.value = []
    if (!form.value.dept_id) {
        showSpin.value = false
        return Message.error('请选择客户名称')
    }
    if (!form.value.transport_type) {
        showSpin.value = false
        return Message.error('请选择运输方式')
    }
    let objDate = JSON.parse(JSON.stringify(form.value))
    let obj = {}
    for (let key in objDate) {
        if (objDate[key]) {
            obj[key] = objDate[key]
        }
    }
    request({
        url: 'prediction/manage/indexAll',
        method: 'get',
        params: obj
    }).then(res => {
        res.data.items.map((v, i) => {
            v.pay_price = '0.00'
        })
        dataTable.value = res.data.items
        showSpin.value = false
    }).catch(err => {
        showSpin.value = false
    })

}
const handledeptName = (id) => {
    let name = ''
    dept_list.value.map((v, i) => {
        if (v.id == id) {
            name = v.name
        }
    })
    return name
}
const handlegoodsName = (id) => {
    let name = ''
    goods_list.value.map((v, i) => {
        if (v.id == id) {
            name = v.name
        }
    })
    return name
}
const handletransportName = (id) => {
    let name = ''
    yunshuList.value.map((v, i) => {
        if (v.key == id) {
            name = v.title
        }
    })
    return name
}
onMounted(() => {
    commonApi.getDict("transport_type").then((res) => {
        yunshuList.value = res.data;
    })
    handleDeptList()
    hadnleChangeContract()
})
const columns = [
    { title: '运单号', dataIndex: 'yundanhao', width: 130, fixed: 'left', },
    { title: '车号', dataIndex: 'car_no', width: 120, fixed: 'left', },
    { title: '原票号', dataIndex: 'ticket_number', width: 150 },
    { title: '箱号', dataIndex: 'box', width: 150 },
    { title: '实际付款金额', dataIndex: 'pay_price', width: 150 },
    { title: '客户名称', dataIndex: 'dept_id', width: 150, slotName: 'dept_id' },
    { title: '品名', dataIndex: 'goods_id', width: 150, slotName: 'goods_id' },
    { title: '运输方式', dataIndex: 'transport_type', width: 150, slotName: 'transport_type' },
    { title: '办理时间', dataIndex: 'process_time', width: 180 },
    { title: '到达时间', dataIndex: 'come_time', width: 180 },
]
</script>
<script>export default { name: 'financial:payOrderRecordAdd' } </script>